<template>
    <div class="order-detail-container">
        <el-button type="primary" plain style="margin-top: 1%;" @click="GoBack">返回</el-button>
        <h2>订单详细</h2>
        <div class="car-info">
            <img :src="carInfo.image" alt="汽车图片" class="car-image">
            <div class="car-name-type">
                <p class="car-name">{{ carInfo.name }}</p>
                <p class="car-type">{{ carInfo.type }}</p>
                <el-button type="primary" size="small">查看配置信息</el-button>
            </div>
            <div class="pickup-return">
                <div class="pickup">
                    <p class="title">取车</p>
                    <p class="time">{{ carInfo.pickupTime }}</p>
                    <p class="address">门店地址：{{ carInfo.pickupAddress }}</p>
                </div>
                <div class="return">
                    <p class="title">还车</p>
                    <p class="time">{{ carInfo.returnTime }}</p>
                </div>
            </div>
        </div>
        <div class="fee-status">
            <div class="fee-detail">
                <h3>费用明细</h3>
                <p>总计: ¥{{ feeDetail.total }}</p>
                <p>天数: {{ feeDetail.days }}</p>
            </div>
            <div class="order-status">
                <h3>订单状态</h3>
                <p>{{ orderStatus }}</p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import request from '@/utils/request'
const GoBack = () => {
    history.back();
};
const route = useRoute()
const orderid = route.params.orderid
const carInfo = ref({
    image: '',
    name: '',
    type: '',
    pickupTime: '',
    pickupAddress: '',
    returnTime: ''
})
const feeDetail = ref({
    total: '',
    days: ''
})
const orderStatus = ref('')

onMounted(async () => {
    // 调用接口获取订单详情数据
    const res = await request.get(`/order/detail/${orderid}`)
    if (res.data.success) {
        const data = res.data.data
        carInfo.value = {
            image: data.carImage,
            name: data.carName,
            type: data.carType,
            pickupTime: data.pickupTime,
            pickupAddress: data.pickupAddress,
            returnTime: data.returnTime
        }
        feeDetail.value = {
            total: data.totalPrice,
            days: data.days
        }
        orderStatus.value = data.statusDesc
        console.log(data);

    }
})
</script>

<style scoped>
.order-detail-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background-color: #7b91be;
}

h2 {
    font-size: 24px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.car-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.car-image {
    width: 200px;
    height: auto;
    margin-right: 20px;
}

.car-name-type {
    flex: 1;
}

.car-name {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
}

.car-type {
    margin-bottom: 10px;
}

.pickup-return {
    display: flex;
    gap: 20px;
}

.title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

.fee-status {
    display: flex;
    gap: 20px;
}

.fee-detail,
.order-status {
    flex: 1;
}

h3 {
    font-size: 18px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}
</style>